<template>
  <div>
    <transition name="van-slide-down">
      <div v-show="visible">
    <scroll :probeType="3" class="content">
      <div class="bg_box">
        <div :class="appType === '277' ? 'bg_blue': 'bg_blue_cat'"></div>
        <div class="bg_white"></div>
        <div class="swiper_img">
          <div>
            <!-- 图片切换动画 -->
            <v-touch @swipeleft="left" @swiperight="right">
              <transition name="bounce">
                <div v-if="this.show">
                  <img v-if="appType === '277'" src="../../../assets/img/strategy/ic_promote_vp1.png"  alt="">
                  <img v-else src="../../../assets/img/strategy/ic_promote_vp1_cat.png"  alt="">
                </div>
              </transition>
              <transition name="bounce">
                <div v-if="!this.show">
                  <img v-if="appType === '277'" src="../../../assets/img/strategy/ic_promote_vp2.png" alt="">
                  <img v-else src="../../../assets/img/strategy/ic_promote_vp2_cat.png" alt="">
                </div>
              </transition>
            </v-touch>
          </div>
        </div>
      </div>
      <div class="btn_box">
        <div :class="appType === '277' ? 'btn': 'btn_cat'" @click="startClick">立即推广</div>
      </div>
    </scroll>
      </div>
    </transition>
  </div>
</template>

<script>
import Scroll from '@/components/common/scroll/Scroll.vue'
import { appType } from '../../../assets/js/app';
  export default {
    components: {
      Scroll,
    },
    created () {
      this.appType = appType()
      this.visible = true;
    },
    data() {
      return {
        show: true,
        visible: false,
        appType: null,
      }
    },
    methods: {
      left() {
        this.show = !this.show
      },
      right() {
        this.show = !this.show
      },
      startClick() {
        this.$router.push('/extension')
      }
    },
  }
</script>

<style scoped>
.content {
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  top: 0;
}
.bg_box {
  position: relative;
}

.bg_blue {
  width: 750px;
  height: 900px;
  background: linear-gradient(#4868f7, #2F41EB);
}

.bg_blue_cat {
  width: 750px;
  height: 900px;
  background: linear-gradient(#ff5e39, #ff8210);
}

.bg_white {
  width: 750px;
  height: 300px;
  background: #fff;
}

.swiper_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 750px;
  height: 1106px;
  overflow: hidden;
  transition: all ease-in-out 200ms;
}

.btn_box {
  padding-bottom: 100px;
}

.btn {
  width: 300px;
  height: 80px;
  border-radius: 35px;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 80px;
  background: #2F41EB;
  margin: 20px auto 0;
}

.btn_cat {
  width: 300px;
  height: 80px;
  border-radius: 35px;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 80px;
  background: linear-gradient(314deg,#ff5e39 10%, #ff8210 87%);
  margin: 20px auto 0;
}
/* 图片进入动画时间过程 */
.bounce-enter-active {
  animation: bounce-in .3s ease-in-out;
}
/* .bounce-leave-active {
  animation: bounce-in .5s reverse;
} */
/* 图片进入动画 */
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
</style>